<template>
  <!-- 顶部京东注册 -->
  <van-sticky>
    <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)" />
  </van-sticky>

  <!-- 表单验证 -->
  <van-form @submit="onSubmit" style="margin-top:50px">
    <van-cell-group inset>
      <van-field v-model="telphone" name="手机号" label="请输入手机号" :rules="[{ required: true, message: '请填写用户名' }]" />
    </van-cell-group>

    <div style="margin: 16px;margin-top: 50px">
      <van-button round block native-type="submit" v-model="show" v-if="telphone.length !== 11" style="background-color:#FA7B7B">
        下一步
      </van-button>
      <van-button round block native-type="submit" v-else>
        下一步
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { docheckphone } from '../server/regist.js'
import { showConfirmDialog } from 'vant';
export default {
  data() {
    return {
      telphone: "",
      show: false
    }
  },

  computed: {     //通过计算属性来判断是否 不禁用 下一步
    btnStatus() {
      return this.telphone !== "" && this.pattern.test(this.telphone) === true
    }
  },

  methods: {
    // 表单提交 手机号
    onSubmit() {
      docheckphone({ tel: this.telphone }).then(res => {
        localStorage.setItem("telphone",this.telphone)
        // 将手机号存储到本地仓库 后面验证码和注册需要用
        // this.$store.commit("changePhone", this.telphone)
        if (res.code === "200") {
          // 获取验证码成功请求
          showConfirmDialog({
            title: '提示',
            message:
              `将向手机号${this.telphone}发送短信验证码`,
          })
            .then(() => {
              this.$router.push('/regist/step2')
            })
            .catch(() => {
              return
            });
        } else {
          // 验证码是否正确做验证
          showConfirmDialog({
            title: '提示',
            message:
              `该手机号已被注册，点击确认去登录`,
          })
            .then(() => {
              this.$router.push('/login')
            })
            .catch(() => {
                return
            });
        }
      })
    }
  }
}


</script>
<style scoped>
.van-button {
  background-color: red;
  color: white;
}
</style>